完全掌握 Console 面板，從認識 Console message 開始。

概覽

Console 面板做為網頁開發者的 Debug 神器，在許多網站開啟 DevTools 時甚至都能看到 Debug 專用的 log，不過在講解 Console 面板的功能之前，得先講講 Console message。

建議閱讀本文時可以搭配 Demo 頁面 Console - Message 一起使用，效果更佳。

Console Message Level

Console message 有分成四種 Level：

• Verbose
• Info
• Warning
• Error

平常最常使用的 console.log(...) 屬於 Info level，當然也有其他 Console API 能夠產生不同 Level 的 Message。

Verbose Message

• console.debug

預設情況下 Console 面板不會顯示 Verbose message，因此直接執行 console.debug 可是什麼都不會看到的哦。

如果開啟 Verbose level，可能會看到很多 [Violation] 'setTimout' handler took ... ms 的 Message，這是由 Chrome 自動產生的，提醒可能需要評估程式碼的效能。

Info Message

• console.log
• console.info

這兩種 Method 在 Console 面板中是等價的，只會顯示 Message 和執行時的程式碼位置。

Warning Message

• console.warn

在開發套件或工具時，console.warn 很適合用在警示「可能」出錯了，或是功能 Deprecate 的提示，例如參數的型態不在預想範圍內時可以印出警告。

另外從 Warning level 開始就會顯示 Call stack 了，展開左邊的灰色小三角可以看到完整的 Function 鍊。

Error Message

• console.error

有時會看到開發者用 console.log 打天下，雖然同樣是 Console message，但嚴重度還是有所區別的，console.error 的使用時機通常是在遭遇了不預期的問題，甚至是影響了網頁的運作，例如無法取得某個套件導致網頁出錯時就不應該使用 console.log。

Message Filter

Console 面板中承載了所有來源的 Message，包括開發者自己、套件、Worker、其他 Frame 所 Call 的 Console API，另外還有瀏覽器自動產生的 Message，如剛剛提到的 Violation 或是網路錯誤等等。

Console message 雖然是用來協助 debug 的，但也可能因此迷失在茫茫 Message 海中，此時就需要各種過濾方式來找出自己最需要的 Message。

注意過濾掉的只有 Console message，也就是說程式碼的輸入和輸出永遠都會留在面板裡面。

By level

點擊面板上方的 Default levels 選單可以調整要顯示哪些 Level 的 Message，預設只有 Verbose 不會顯示。

另外可以從最左上角的按鈕打開側欄，裡面把各種 Level 的 Message 都整理好了，另外還多了 user messages 類別，只包含透過 Console API 產生的 Message。

By pattern

在旁邊的輸入框可以填入 Regular expression 或關鍵字來過濾 Message。

找出 An 開頭的 Message

By URL

同樣在輸入框內，想要過濾特定 Domain 或第三方套件的 Message 時可用 url: 來搜尋：

• url:google.com – 只顯示關於 google.com Domain 的 Message
• -url:noise.js – 過濾掉某個瘋狂印出一堆 Message 的套件

Console Settings

Console 面板的右上角有一個齒輪，打開會看到八個選項，筆者先講講預設開啟的選項。

Group Similar

Console 面板預設會把類似的 Message group 在一起，且不能展開，例如這樣：

for (let i = 10; i--;) console.log('similar')

Eager evaluation

Console 面板預設會自動預覽 JavaScript 的執行結果，但在某些情況不會出現預覽，例如執行後會出錯或是有副作用的程式碼。

Autocomplete from history

在 Console 面板輸入文字時預設會出現下拉選單，可以快速選擇曾經輸入過的程式碼。

Evaluate triggers user activation

為了資安考量和使用者體驗，瀏覽器中有些 API 是無法直接靠 JavaScript 觸發的，例如有聲影片自動播放、開啟 Popup、下載檔案等等。

以點擊按鈕開啟 Popup 為例，引入一個含有 button.click() 的 JavaScript 檔會發現網址列出現「Pop-up blocked」，但如果是使用者手動按下按鈕，就會觸發瀏覽器的 User activation 狀態並正常開啟 Popup：

window.open();

過太久也會失去 User activation

而 Console 內預設在執行 JavaScript 時會觸發 User activation，這也是為什麼在 Console 直接輸入 window.open() 總是能開啟 Popup，可以關閉這個選項來測試 User activation 相關的 API，筆者曾經因為 Console 面板內能 Work，就直接寫在程式碼中了，踩個大雷。

Hide network

瀏覽器預設會印出關於網路的錯誤 Message，例如收到 4XX、5XX 的 Status code 就會顯示錯誤。

Preserve log

重整或跳頁的時候保留 Console 面板的 Log，包含輸入的 JavaScript，跳轉時可以看到藍色的 Navigated to ... 提示，也就是原本會清掉 Log 的時機。

Selected context only

利用左上角的 Context 選單搭配設定裡面的 Selected Context Only 來過濾 Message。

當其他 Context 有過多 Message 或是只想觀察某個 Context 的 Message 時可以使用，最常見的情況就是觀察嵌入的 iframe 內產生的 Message，另外 Extension、Worker、Service worker 也都是不同的 Context。

但要注意同時也只會顯示屬於該 Context 的 JavaScript log，畢竟不同 Context 中執行的 JavaScript 無法直接存取。

Log XMLHttpRequests

會印出 XMLHttpRequest 和 Fetch 的請求結果，比起 Network 面板，這個選項顯示的資訊實在非常少，不過可以透過 Reveal in Network panel 連過去。

Show Log Timestamp

這個選項藏在 DevTools 本身的 Settings 裡面，可以顯示 Console 中每一行印出時的 Timestamp。

小結

今天把 Console 面板的設定部分講解完畢了，明天將會介紹能夠大幅提升 Debug 效率的 Console API！